<template>
	<view class="content">
		<view class="sign-head">
			<view style="width: 100%; height: 130rpx;"></view>
			<view class="sign-head-day">签到领红包，本周已签<text class="sign-head-num">{{info.day}}</text>天</view>
			<view class="sign-head-btn" @tap="signInToggle">{{signTxt}}</view>
		</view>
		<view class="sign-readpack-price">红包总额:￥<text class="num">{{info.sign_money}}</text></view>
		<view class="sign-deital-list">
			<view class="sign-deital-list-title">红包收支明细</view>
			<view class="sign-deital-list-cont">
				<view class="sign-deital-list-cont-item" v-for="(item,index) in redList" :key="index">
					<view>
						<view class="sign-deital-list-cont-item-text">{{item.type_text}}</view>
						<view class="sign-deital-list-cont-item-time">{{item.create_time}}</view>
					</view>
					<view class="sign-deital-list-cont-item-num">{{item.way == 1?'+':'-'}}{{item.money}}</view>
				</view> 
			</view>
		</view>
		<mix-load-more :status="loadMoreStatus"></mix-load-more>
	</view>
</template>

<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				signTxt:'签到',
				isSign:false,
				redList:[],
				page:1,
				total_pages:1,
				loadMoreStatus:0,
				info:{}
			}
		},
		methods:{
			signInToggle(type){
				let that = this
				if(that.isSign) return false
				jewel.get('Member/signIn', {}, true, function(res){
					jewel.showToast(res.data.msg,1500)
					that.signTxt = '已签到'
					that.isSign = true
					that.page = 1
					that.getList()
					that.getSignInfo()
				});
				
			},
			getList(type){
				let that = this
				that.loadMoreStatus = 1
				if(that.total_pages == 0) that.total_pages = 1
				if(that.page <= that.total_pages){
					jewel.get('member/sign_in_list', {page:that.page}, true, function(res){
						if(type == 'loadMore'){
							that.redList = that.redList.concat(res.data.data)
						}else{
							that.redList = res.data.data
							that.total_pages = res.data.total_pages
							that.loadMoreStatus = that.total_pages <= 1?2:0
						}
						uni.stopPullDownRefresh()
					});
				}else{
					that.loadMoreStatus = 2
				}
			},
			getSignInfo(){
				let that = this
				jewel.get('member/signin_info', {}, true, function(res){
					that.info = res.data.data
				});
			}
		},
		onLoad() {
			let that = this
			jewel.get('Member/hasSign', {}, true, function(res){
				if(res.data.code == 0){
					that.signTxt = '已签到'
					that.isSign = true
				}else{
					that.signTxt = '签到'
				}
			});
			that.getList()
			that.getSignInfo()
		},
		onReachBottom() {
			this.page++
			this.getList('loadMore')
		},
		onPullDownRefresh() {
			this.page = 1
			this.getList('refresh')
			this.getSignInfo()
		},
		onNavigationBarButtonTap(e) {
			if(e.index == 0){
				uni.navigateTo({
					url:'/pages/jewel/user/sign_task'
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.content{
		.sign-head{
			background-image: url(../../../static/images/jewel/sign_list_bg.jpg);
			background-size: 100% 100%;
			height: 364rpx;
			&-day{
				background-image: url(../../../static/images/jewel/sign_list_day.png);
				background-size: 100% 100%;
				height: 76rpx;
				line-height: 76rpx;
				width: 513rpx;
				margin: 0 auto;
				color: #8d2409;
				font-size: 30rpx;
				text-align: center;
				font-weight: bold;
			}
			&-btn{
				background-image: url(../../../static/images/jewel/sign_list_btn.png);
				background-size: 100% 100%;
				width: 300rpx;
				height: 102rpx;
				text-align: center;
				font-size: 36rpx;
				color: #d71511;
				line-height: 102rpx;
				margin: 0 auto;
				margin-top: 20rpx;
			}
			&-num{
				font-size: 36rpx;
			}
		}
		.sign-readpack-price{
			background-color: #f8a48a;
			text-align: center;
			font-size: 36rpx;
			color: #d71511;
			line-height: 76rpx;
			.num{
				font-size: 44rpx;
			}
		}
		.sign-deital-list{
			&-title{
				font-size: 32rpx;
				line-height: 86rpx;
				border-bottom: 1px solid #e5e5e5;
				text-align: center;
			}
			&-cont{
				width: 690rpx;
				margin: 0 auto;
				&-item{
					border-bottom: 1px solid #e5e5e5;
					height: 116rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					line-height: 50rpx;
					&-text{
						font-size: 30rpx;
					}
					&-time{
						font-size: 28rpx;
						color: #4d4d4d;
					}
					&-num{
						color: #d71511;
						font-size: 38rpx;
					}
				}
			}
		}
	}
	
</style>
